@react-md/avatar

@react-md/avatar

Create avatars to represent people or objects with images, icons, or text. Different theme colors can also be applied for icons or text.

Installation

npm install --save @react-md/avatar

It is generally recommended to also install the following packages since they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/icon

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

One of the main use-cases will probably be to display a list of people with specific avatars with them:

import React from "react";
import { render } from "react-dom";
import { Avatar } from "@react-md/avatar";
import { List, ListItem } from "@react-md/list";

const people = [
  { name: "Logan Tyler", avatarUrl: "https://some-picture.com" },
  { name: "Trenton Berry", avatarUrl: "https://some-picture.com" },
  { name: "Damon Fletcher", avatarUrl: "https://some-picture.com" },
  { name: "Thomas Owen", avatarUrl: "https://some-picture.com" },
  { name: "Charity Henderson", avatarUrl: "https://some-picture.com" },
];

const App = () => (
  <List>
    {people.map(({ name, avatarUrl }, i) => (
      <ListItem
        id={`person-${i}`}
        key={i}
        leftAddon={<Avatar src={avatarUrl} alt={`${name}'s avatar'`} />}
        leftAddonType="avatar"
      >
        {name}
      </ListItem>
    ))}
  </List>
);

render(<App />, document.getElementById("root"));

Changelog

2.9.1 (2021-07-27)

Bug Fixes

• @react-md/layout: Do not unmount children when swapping to non-fixed appbar mini layouts (64103c8), closes #1207
• @react-md/utils: useMediaQuery uses addEventListener/removeEventListener (b889a9e)

Other Internal Changes

• fixed sass-lint error (58f614b)
• install: slighly reduce install size by excluding tests in publish (9d01a44)
• react-md.dev: fix links to form demos in blog (b1626b5)